﻿@page "/size"

<h1>Sizing the modal</h1>

<hr class="mb-5" />

<p>
    The modal has a default width. However, this can be changed by setting the <code>Size</code> option.
</p>
<p>
    There are 5 different sizes available:
    <ul>
        <li>Small - 300px</li>
        <li>Medium - 500px (default)</li>
        <li>Large - 800px</li>
        <li>Extra Large - 1140px</li>
        <li>Custom - Provide your own class, via the <code>SizeCustomClass</code> parameter, which sets the width</li>
    </ul>
</p>

<div class="card mb-4">
    <h5 class="card-header">Setting on a per modal basis</h5>
    <div class="card-body">
        <p class="card-text">
            <code>
                @("var options = new ModalOptions() { Size = ModalSize.Large };")
                <br />
                @("Modal.Show<Confirm>(\"Size: Large\", options);")
            </code>
        </p>
    </div>
</div>

<div class="card mb-4">
    <h5 class="card-header">Setting globally for all modals</h5>
    <div class="card-body">
        <p class="card-text">
            <code>
                @("<CascadingBlazoredModal Size=\"ModalSize.Large\" />")
            </code>
        </p>
    </div>
</div>

<button @onclick="@(() => SetSize(ModalSize.Automatic))" class="btn btn-secondary">Automatic</button>
<button @onclick="@(() => SetSize(ModalSize.Small))" class="btn btn-secondary">Small</button>
<button @onclick="DefaultSize" class="btn btn-primary">Medium (default)</button>
<button @onclick="@(() => SetSize(ModalSize.Large))" class="btn btn-secondary">Large</button>
<button @onclick="@(() => SetSize(ModalSize.ExtraLarge))" class="btn btn-secondary">Extra Large</button>
<button @onclick="@(() => SetSize(ModalSize.Custom))" class="btn btn-secondary">Custom</button>

@code {

    [CascadingParameter] public IModalService Modal { get; set; } = default!;

    void DefaultSize()
    {
        Modal.Show<Confirm>("Size: Medium (Default)");
    }

    void SetSize(ModalSize size)
    {
        var options = new ModalOptions { Size = size };

        if (size == ModalSize.Custom)
            options.SizeCustomClass = "my-custom-size";

        Modal.Show<Confirm>($"Size: {size}", options);
    }
}